<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="姓名">
                <a-input v-model="queryParam.empName" placeholder="请输入导购名称进行搜索" allowClear />
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="24">
              <a-form-item label="工号">
                <a-input v-model="queryParam.linkId" placeholder="请输入工号进行搜索" allowClear />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
                <a-button type="primary" @click="searchList" style="margin-right: 24px">搜索</a-button>
                <a-button type="primary" @click="restList">重置</a-button>
              </span>
            </a-col>
            <a-col :md="24" :sm="24">
              <div style="display: flex">
                <a-button type="primary" @click="add">新增</a-button>
                <a-upload accept=".xls,.xlsx" name="file" :beforeUpload="beforeUpload" :isMultiple="false" @change="handleChange" style="margin-left: 16px; margin-right: 12px">
                  <a-button type="primary">批量导入</a-button>
                </a-upload>
                <a-button type="primary" @click="download">模板下载</a-button>
              </div>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        ref="table"
        size="default"
        @change="handleTableChange"
        :rowKey="record => record.id"
        :columns="columns"
        :data="loadData"
        :pagination="pagination"
        :bordered="false"
        style="margin-top: 24px"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
        </span>
        <span slot="sex" slot-scope="text, record, index">
          <span>{{ record.sex == 'W' ? '女' : '男' }}</span>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="removeClick(record.linkId)">移除</a>
        </span>
      </s-table>
    </a-card>
    <!-- 新增 -->
    <a-modal v-model="campVisible" centered :width="500" :closable="false" @ok="addOk" @cancel="addCancel">
      <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="工号">
          <div style="display: flex">
            <a-input v-model.trim="form.workNumber" />&nbsp;&nbsp;&nbsp;
            <a-button type="primary" @click="workSearch">搜索</a-button>
          </div>
        </a-form-model-item>
        <a-form-model-item label="姓名">
          <a-input v-model="form.name" disabled />
        </a-form-model-item>
        <a-form-model-item label="性别">
          <a-input v-model="form.gender" disabled />
        </a-form-model-item>
        <a-form-model-item label="手机号">
          <a-input v-model="form.phone" disabled />
        </a-form-model-item>
        <a-form-model-item label="所属店铺">
          <a-input v-model="form.shop" disabled />
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <!-- 移除 -->
    <a-modal v-model="visible" @ok="examineOk" centered :width="400" :closable="false" okText="移除">
      <div class="edit-examine">
        <div class="examine">是否确认将该导购从</div>
        <div class="examine">{{ nameType[type] }}名单中移除？</div>
      </div>
    </a-modal>
    <!-- 新增判断 -->
    <a-modal v-model="addVisible" @ok="addedOK" @cancel="takeCancel" centered :width="400" :closable="false" okText="确认修改">
      <div class="edit-examine">
        <div class="examine">{{ userName }}</div>
        <span style="color: #aaa; font-size: 12px">点击确认修改，会将该导购从{{ copyName }}列表中移除</span>
      </div>
    </a-modal>
    <!-- 新增判断2 -->
    <a-modal v-model="newlyVisible" centered :width="400" :closable="false" :footer="null" :maskClosable="false">
      <div class="edit-examine">
        <div class="examine">{{ userName }}</div>
        <a-button type="primary" style="width: 100px; margin-top: 30px" @click="hideModal">确认</a-button>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { STable } from '@/views/box/components'
import { themeList, baseInfo, themeAdd, themeDel, themeImport } from '@/api/pos/single'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '导购姓名',
    dataIndex: 'empName'
  },
  {
    title: '工号',
    dataIndex: 'linkId'
  },
  {
    title: '性别',
    dataIndex: 'sex',
    align: 'center',
    scopedSlots: { customRender: 'sex' }
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
    align: 'center'
  },
  {
    title: '所属店铺',
    dataIndex: 'storeName',
    align: 'center'
  },
  {
    title: '创建人',
    dataIndex: 'createUserName',
    align: 'center'
  },

  {
    title: '创建时间',
    dataIndex: 'createDate',
    align: 'center'
  },

  {
    title: '操作',
    dataIndex: 'action',
    width: '120px',
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    STable
  },
  data() {
    return {
      columns,
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      fileList: [],
      dataInfo: [],
      form: {
        workNumber: '',
        name: '',
        phone: '',
        shop: '',
        gender: ''
      },
      userInfo: Vue.ls.get(USER_INFO),
      visible: false,
      campVisible: false,
      addVisible: false,
      newlyVisible: false,
      linkId: '',
      name: '',
      nameType: {
        directly: '直营kou导购',
        star: '直营明星导购',
        essence: 'kos精选',
        trained: 'JNBY潇洒小姐'
      },
      userName: '',
      copyName: '',
      queryParam: {
        empName: '',
        linkId: ''
      },
      type: '',
      pagination: {
        pageSize: 10,
        page: 1,
        current: 1,
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      loadData: parameter => {
        const queryParam = JSON.parse(JSON.stringify(this.queryParam))
        queryParam.workNo = this.userInfo.workNo
        // queryParam.workNo = '21528'
        queryParam.role = this.type == 'directly' ? 3 : this.type == 'star' ? 6 : this.type == 'essence' ? 7 : 8

        const data = {
          ...queryParam,
          current: parameter.pageNo,
          size: parameter.pageSize
        }
        return themeList(data).then(res => {
          if (res.code === 200) {
            this.pagination.current = res.data.current
            const { records, total, size, current } = res.data
            const data = {
              page: {
                count: total,
                pageNo: current,
                pageSize: size,
                pages: Math.ceil(total / size)
              },
              data: records
            }

            return data
          } else {
            this.$message.error(res.msg || res.message)
            const data = {
              page: {
                pageNo: 0,
                count: 0,
                pageSize: 10
              },
              data: []
            }
            return data
          }
        })
      }
    }
  },
  created() {
    this.getType()
  },
  watch: {
    $route(to, from) {
      this.getType()
      this.queryParam = {}
      this.$refs.table.refresh(true)
    }
  },

  methods: {
    beforeUpload(file) {
      this.fileList = [...this.fileList, file]
      return false
    },
    handleChange(info) {
      console.log(info)
      if (info.fileList.length > 1) {
        info.fileList.splice(0, 1)
      }
      if (this.fileList.length > 1) {
        this.fileList.splice(0, 1)
      }
      // this.$message.success('批量上传成功')
      let formData = new FormData()
      formData.append('file', this.fileList[0])
      formData.append('role', this.type == 'directly' ? 3 : this.type == 'star' ? 6 : this.type == 'essence' ? 7 : 8)
      formData.append('workNo', this.userInfo.workNo)
      themeImport(formData).then(res => {
        if (res.code === 200) {
          if (res.data == 'ok') {
            this.$message.success('批量上传成功')
            this.$refs.table.refresh(true)
          } else {
            this.$message.warning('部分成功查看原因')
            this.$refs.table.refresh(true)
            window.location.href = res.data
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination.page = pagination.page
      this.pagination.pageSize = pagination.pageSize
      this.pagination.current = pagination.current
    },
    hideModal() {
      this.newlyVisible = false
    },
    removeClick(linkId) {
      this.linkId = linkId
      this.visible = true
    },
    add() {
      this.campVisible = true
    },
    examineOk() {
      let params = {
        workNo: this.userInfo.workNo,
        linkId: this.linkId
      }
      themeDel(params).then(res => {
        if (res.code == 200) {
          this.$message.success('移除成功!')
          this.visible = false
          this.$refs.table.refresh(true)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    workSearch() {
      if (!this.form.workNumber) return this.$message.warning('请填写工号')
      let params = {
        linkId: this.form.workNumber
      }
      baseInfo(params).then(res => {
        if (res.code == 200) {
          console.log(res.data, 'data')
          this.form.name = res.data.name
          this.form.gender = res.data.sex == 2 ? '女' : '男'
          this.form.phone = res.data.mobile
          this.form.shop = res.data.storeName
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    addOk() {
      this._themeAdd()
    },
    addedOK() {
      console.log(this.form.workNumber)
      let params = {
        workNo: this.userInfo.workNo,
        role: this.type == 'directly' ? 3 : this.type == 'star' ? 6 : this.type == 'essence' ? 7 : 8,
        linkId: this.form.workNumber,
        confirm: 'Y'
      }
      themeAdd(params).then(res => {
        if (res.code == 200) {
          console.log(res.data)
          this.$message.warning('添加成功!')
          this.form = {
            workNumber: '',
            name: '',
            phone: '',
            shop: '',
            gender: ''
          }

          this.addVisible = false
          this.$refs.table.refresh(true)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    takeCancel() {
      this.campVisible = false
      this.form = {
        workNumber: '',
        name: '',
        phone: '',
        shop: '',
        gender: ''
      }
    },
    addCancel() {
      this.campVisible = false
      this.form = {
        workNumber: '',
        name: '',
        phone: '',
        shop: '',
        gender: ''
      }
    },
    _themeAdd() {
      let params = {
        workNo: this.userInfo.workNo,
        role: this.type == 'directly' ? 3 : this.type == 'star' ? 6 : this.type == 'essence' ? 7 : 8,
        linkId: this.form.workNumber
      }
      themeAdd(params).then(res => {
        if (res.code == 200) {
          console.log(res.data)
          if (res.data.needConfirm == 'N' && res.data.result == 'N') {
            this.userName = res.data.failReason
            this.newlyVisible = true
            this.form = {
              workNumber: '',
              name: '',
              phone: '',
              shop: '',
              gender: ''
            }
          }
          if (res.data.result == 'Y') {
            this.$message.warning('添加成功!')
            this.form = {
              workNumber: '',
              name: '',
              phone: '',
              shop: '',
              gender: ''
            }
            this.$refs.table.refresh(true)
          }
          if (res.data.needConfirm == 'Y' && res.data.result == 'N') {
            this.addVisible = true
            this.userName = res.data.failReason
            this.copyName = this.userName.split('，')[0].slice(5)
          }
          this.campVisible = false
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    getType() {
      let url = window.location.pathname.split('/')
      if (url.includes('directly')) {
        this.type = 'directly'
      } else if (url.includes('star')) {
        this.type = 'star'
      } else if (url.includes('essence')) {
        this.type = 'essence'
      } else if (url.includes('trained')) {
        this.type = 'trained'
      }
    },
    searchList() {
      this.$refs.table.refresh(true)
    },
    restList() {
      this.queryParam = {
        empName: '',
        linkId: ''
      }
      this.$refs.table.refresh(true)
    },
    download() {
      window.location.href = 'https://jnbyoss.oss-cn-hangzhou.aliyuncs.com/upload/20220811/6a2a45aa0d0a6b6eae32271719595b11.xlsx'
    },
    // 导入
    importClick() {}
  }
}
</script>
<style scoped lang="less">
.edit-examine {
  margin-top: 12px;
  margin-bottom: 12px;
  text-align: center;
}
.examine {
  font-size: 16px;
  font-weight: 500;
}
/deep/ .ant-upload-list-item-info {
  display: none;
}
</style>